﻿@{
    ViewBag.Title = "选择权限";
    Layout = "~/Views/Shared/_UserPage.cshtml";
}

<script type="text/javascript">
    $(function () {
        //当页面首次刷新的时候执行的事件
        initMenuTable();  //菜单列表
        initActionTable();  //功能列表
        initActionPathTable();  //权限路径列表

        initRoleComboBox();  //初始化权限组下拉框
        //$('#actionDataGrid').parent().find("div .datagrid-header-check").children("input[type='checkbox']").eq(0).attr("checked", true);  //可控制全选按钮
    });
    //实现对DataGird控件的绑定操作

    //初始化菜单列表
    function initMenuTable(queryData) {
        $('#menuTreeGrid').treegrid({   //定位到Table标签，Table标签的ID是myDataGrid
            //   MenuInfo是控制器，GetData是控制器中获取用户数据的一个Action
            url: '/MenuInfo/GetPurviewMenuList',   //指向后台的Action来获取当前用户的信息的Json格式的数据
            //title: '菜单管理',  //标识
            //width: 'auto',
            //height: 500,
            nowrap: true,
            autoRowHeight: false,
            striped: true,
            collapsible: true,
            rownumbers: true,
            //sortName: 'ID',    //根据某个字段给easyUI排序
            //sortOrder: 'asc',
            remoteSort: false,
            idField: 'ID',
            treeField: 'MenuName',
            parentField: 'PID',
            checkOnSelect: true,
            selectOnCheck: true,
            singleSelect: true,
            queryParams: queryData,  //异步查询的参数
            toolbar: '#menuToolBar',
            columns: [[
                { title: '菜单名称', field: 'MenuName', width: 200, sortable: true },
            ]],
            onClickRow: function (index, row) {
                //以下方法可行
                var selectedRow = $("#menuTreeGrid").treegrid("getSelected");
                if (selectedRow) {
                    $('#actionDataGrid').datagrid('load', { menuID: selectedRow.ID });
                }
                //$.EasyuiSlide("点击事件测试");
            }
        });
    }

    //初始化功能列表
    function initActionTable(queryData) {
        $('#actionDataGrid').datagrid({   //定位到Table标签，Table标签的ID是myDataGrid
            //   MenuInfo是控制器，GetData是控制器中获取用户数据的一个Action
            url: '/Purview/GetMenuActionList',   //指向后台的Action来获取当前用户的信息的Json格式的数据
            //title: '菜单管理',  //标识
            //width: 'auto',
            //height: 500,
            nowrap: true,
            autoRowHeight: false,
            striped: true,
            collapsible: true,
            rownumbers: true,
            //sortName: 'ID',    //根据某个字段给easyUI排序
            //sortOrder: 'asc',
            remoteSort: false,
            idField: 'ID',
            checkOnSelect: false,
            selectOnCheck: false,
            singleSelect: true,
            queryParams: queryData,  //异步查询的参数
            toolbar: '#actionToolBar',
            columns: [[
                //{ field: 'ck', checkbox: true },   //选择
                {
                    field: 'IsChecked',
                    //formatter: function (value, row, index) {
                    //    if (value == true) {
                    //        return '<input type="checkbox" name="DataGridCheckbox" checked="checked">';
                    //    }
                    //    else {
                    //        return '<input type="checkbox" name="DataGridCheckbox">';
                    //    }
                    //}
                    formatter: function (value, row, index) {
                        if (value == true) {
                            return '<input type="checkbox" checked="true" onclick="ChoosePurview.ChangeChecked(' + index + ');" />';
                        }
                        else {
                            return '<input type="checkbox" onclick="ChoosePurview.ChangeChecked(' + index + ');" />';
                        }
                    }
                },
                { title: '功能名称', field: 'ActionName', width: 175, sortable: true },
            ]]
        });
    }

    //初始化权限路径列表
    function initActionPathTable(queryData) {
        $('#purviewPathChooseDataGrid').datagrid({   //定位到Table标签，Table标签的ID是myDataGrid
            //   MenuInfo是控制器，GetData是控制器中获取用户数据的一个Action
            url: '/Purview/GetMenuActionPathList',   //指向后台的Action来获取当前用户的信息的Json格式的数据
            //title: '菜单管理',  //标识
            //width: 'auto',
            //height: 500,
            nowrap: true,
            autoRowHeight: false,
            striped: true,
            collapsible: true,
            rownumbers: true,
            //sortName: 'ID',    //根据某个字段给easyUI排序
            //sortOrder: 'asc',
            remoteSort: false,
            idField: 'ID',
            checkOnSelect: true,
            selectOnCheck: true,
            singleSelect: true,
            queryParams: queryData,  //异步查询的参数
            toolbar: '#purviewPathChooseToolBar',
            columns: [[
                { title: '权限路径', field: 'PurviewPath', width: 200, sortable: true },
            ]]
        });
    }

    //初始化权限组下拉框（树形结构）
    function initRoleComboBox() {
        $('#Role').combotree({
            url: '/RoleInfo/GetRoleComboBoxList',
            //valueField: 'ID',
            //textField: 'RoleName',
            //选中事件处理
            onSelect: function (record) {
                ChoosePurview.RoleChanged(record);
            }
        });
    }

    var ChoosePurview = {
        //权限组选中事件处理（取得权限组已设定的权限，赋值给现有权限列表）
        RoleChanged: function (record) {
            //$.EasyuiSlide("选中事件处理：" + record.id + "," + record.text);
            $.post("/Purview/RoleChangedPost?roleID=" + record.id);
            ChoosePurview.ReloadAction();  //重新刷新功能列表
            ChoosePurview.ReloadPurviewPath();  //重新刷新权限路径列表
        },

        //刷新菜单
        ReloadMenu: function () {
            $("#menuTreeGrid").treegrid("reload");
        },

        //刷新功能
        ReloadAction: function () {
            $("#actionDataGrid").datagrid("reload");
        },

        //刷新权限路径
        ReloadPurviewPath: function () {
            $("#purviewPathChooseDataGrid").datagrid("reload");
        },

        //全选
        ChooseAll: function () {
            var selectedRow = $("#menuTreeGrid").datagrid("getSelected");  //获取选中行记录
            if (selectedRow) {
                $.post("/Purview/ChooseAll?menuID=" + selectedRow.ID + "&isChecked=true");
                ChoosePurview.ReloadAction();
                ChoosePurview.ReloadPurviewPath();
            }
        },

        //全不选
        UnChooseAll: function () {
            var selectedRow = $("#menuTreeGrid").datagrid("getSelected");  //获取选中行记录
            if (selectedRow) {
                $.post("/Purview/ChooseAll?menuID=" + selectedRow.ID + "&isChecked=false");
                ChoosePurview.ReloadAction();
                ChoosePurview.ReloadPurviewPath();
            }
        },

        //反选
        OppositeChoose: function () {
            var selectedRow = $("#menuTreeGrid").datagrid("getSelected");  //获取选中行记录
            if (selectedRow) {
                $.post("/Purview/OppositeChoose?menuID=" + selectedRow.ID);
                ChoosePurview.ReloadAction();
                ChoosePurview.ReloadPurviewPath();
            }
        },

        //勾选或者取消勾选
        ChangeChecked: function (index) {
            //debugger;
            $("#actionDataGrid").datagrid("selectRow", index);  //选中指定行
            //$.EasyuiSlide("选中行：" + index);
            var selectedRow = $("#actionDataGrid").datagrid("getSelected");  //获取选中行记录
            if (selectedRow) {
                //$.EasyuiSlide("勾选测试，记录ID：" + selectedRow.ID + ",功能名称：" + selectedRow.ActionName + ",选中状态：" + selectedRow.IsChecked);
                //参考文章：http://blog.csdn.net/baronyang/article/details/9323463
                //此处需取得选中行的CheckBox的状态，然后传给下面的post

                //此处是为了取出IsChecked的值
                if (selectedRow.IsChecked == false) {
                    selectedRow.IsChecked = true;
                }
                else {
                    selectedRow.IsChecked = false;
                }
                //var oop = $("#actionDataGrid").datagrid('getPanel').find('div.datagrid-cell input:checked');
                $.post("/Purview/ChangeChecked?menuActionID=" + selectedRow.ID + "&isChecked=" + selectedRow.IsChecked);  //xxxx由上面的方法获取
            }
            ChoosePurview.ReloadPurviewPath();

            //var actionList = $('#actionDataGrid').datagrid('getRows');  //获取列表数据
            //var actionListJson = JSON.stringify(actionList);  //转为json格式
            //$.post("Purview/ChangeChecked?actionListJson=" + actionListJson);
        }
    }
</script>

<table>
    <tr>
        <!--左边为菜单列表-->
        <td>
            <div region="west" data-options="border:false" style="width: 250px; height: 400px;">
                <div class="easyui-panel" title="菜单列表">
                    <table id="menuTreeGrid" style="height: 358px;"></table>
                    <div id="menuToolBar">
                        <a href='javascript:void(0)' class='easyui-linkbutton' onclick='ChoosePurview.ReloadMenu()' data-options='plain:true,iconCls:"icon-application_lightning"'>刷新</a>
                    </div>
                </div>
            </div>
        </td>

        <!--中间为功能列表-->
        <td>
            <div region="center" style="border-left: 0px; width: 270px; height: 400px;">
                <div class="easyui-panel" title="功能列表">
                    <form id="form-purview" method="post">
                        <table style="width: 265px;">
                            <tr>
                                <td rowspan="1" colspan="2">
                                    <table id="actionDataGrid" style="height: 335px; width: 260px;"></table>
                                    <div id="actionToolBar">
                                        <a href='javascript:void(0)' class='easyui-linkbutton' onclick='ChoosePurview.ChooseAll()' data-options='plain:true,iconCls:"icon-bestseller"'>全选</a>
                                        <a href='javascript:void(0)' class='easyui-linkbutton' onclick='ChoosePurview.UnChooseAll()' data-options='plain:true,iconCls:"icon-blue_lego"'>全不选</a>
                                        <a href='javascript:void(0)' class='easyui-linkbutton' onclick='ChoosePurview.OppositeChoose()' data-options='plain:true,iconCls:"icon-caution"'>反选</a>
                                        <a href='javascript:void(0)' class='easyui-linkbutton' onclick='ChoosePurview.ReloadAction()' data-options='plain:true,iconCls:"icon-application_lightning"'>刷新</a>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td style="width: 95px;">
                                    <div>权限组导入：</div>
                                </td>
                                <td>
                                    <div>
                                        <input id="Role" name="Role" class="easyui-combotree">
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
        </td>

        <!--右边为权限路径预览-->
        <td>
            <div region="center" style="border-left: 0px; width: 265px; height: 400px;">
                <div class="easyui-panel" title="权限路径预览">
                    <table id="purviewPathChooseDataGrid" style="height: 335px; width: 260px;"></table>
                    <div id="purviewPathChooseToolBar">
                        <a href='javascript:void(0)' class='easyui-linkbutton' onclick='ChoosePurview.ReloadPurviewPath()' data-options='plain:true,iconCls:"icon-application_lightning"'>刷新</a>
                    </div>
                </div>
            </div>
        </td>
    </tr>
</table>
